﻿<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>border-radius制作半圆效果</title>
  <style type="text/css">
    .semicircle {
      background-color: orange;
      margin: 30px;
    }
    .top {
      width: 100px;
      height: 50px;
      border-radius: 50px 50px 0 0;
    }
    .right {
      height: 100px;
      width: 50px;
      border-radius: 0 50px 50px 0;
    }
    .bottom {
      width: 100px;
      height: 50px;
      border-radius: 0 0 50px 50px;
    }
    .left {
      width: 50px;
      height: 100px;
      border-radius: 50px 0 0 50px;
    }
  </style>
</head>
<body>
	<div class="semicircle top"></div>
	<div class="semicircle right"></div>
	<div class="semicircle bottom"></div>
	<div class="semicircle left"></div>
</body>
</html>